import React from "react";
import ReactDOM from 'react-dom';
import classNames from "classnames";
import { observer } from "mobx-react";
import DropMenu from './DropMenu';
import "./index.less";
import { WeaLocaleProvider, WeaUpload } from "ecCom";
import { Button, Tooltip, Popover, Badge, Icon, Modal } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class AppDesignerHeader extends React.Component {
  onTabChange = (tabKey) => {
    const { store } = this.props;
    store.onTabKeyChange(tabKey);
  }
  enterTab = (key, e) => {
    const { store } = this.props;
    if (key === 'excel' && store.excelPages.length > 0) {
      const { offsetLeft, offsetHeight, offsetTop } = e.target;
      this.showDropMenu(offsetLeft, offsetTop + offsetHeight);
    }
  }
  leaveTab = (key) => {
    if (key === 'excel') {
      const { store } = this.props;
      store.hideDropMenu();
    }
  }
  showDropMenu = (left, top) => {
    if (!this.dropMenu) {
      this.dropMenu = document.createElement('div');
      document.body.appendChild(this.dropMenu);
      this.dropMenu.className = "edc-drop-menu-wrapper";
      this.renderDropMenu();
    }
    const { store } = this.props;
    store.showDropMenu(left, top);
  }
  renderDropMenu = () => {
    const { store } = this.props;
    ReactDOM.render(<DropMenu ecId={`${this && this.props && this.props.ecId || ''}_DropMenu@igaxpo`} store={store} />, this.dropMenu);
  }
  renderTabs = () => {
    const { store } = this.props;
    return store.tabs.map(({ key, text }) => (
      <li
        key={key}
        onClick={() => this.onTabChange(key)}
        className={classNames({ active: key === store.tabKey, 'with-down': key === 'excel' && store.excelPages.length > 0 })}
        onMouseEnter={this.enterTab.bind(this, key)}
        onMouseLeave={this.leaveTab.bind(this, key)}
      >
        {text}
      </li>
    ));
  }
  componentWillUnmount() {
    if (this.dropMenu) {
      ReactDOM.unmountComponentAtNode(this.dropMenu);
      document.body.removeChild(this.dropMenu);
      this.dropMenu = null;
    }
  }
  render() {
    const { store: { appName, tabKey, readonly, excelDesigner } } = this.props;
    // let toolAreaStyle = readonly ? "none" : "auto";
    // style={{pointerEvents: toolAreaStyle}}
    let toolAreaStyle = false;
    if (excelDesigner) {
      const { fieldAssignStore } = excelDesigner;
      if (fieldAssignStore) {
        const { visible } = fieldAssignStore;
        toolAreaStyle = visible ? "none" : "auto";
      }
    }
    const fieldAssignList = excelDesigner.fieldAssignList.slice();
    return (
      <div className='wea-edc-header edc-ad-header' style={{ pointerEvents: toolAreaStyle }}>
        <div className='logo wea-f14'>e-cology | {getLabel('502641', '数据中心')}</div>
        <div className='header-right'>
          {!readonly && <div className={classNames("edc-header-btns", { show: tabKey === 'excel' })}>
            <a title={getLabel('30986', '保存')} onClick={excelDesigner.saveExcelPage}><i className="icon-edc-common-save"></i></a>
            <a className={classNames({ active: excelDesigner.codeEditorStore.visible })} onClick={excelDesigner.codeEditorStore.toggleEditor} title={getLabel('505950', '代码块')}><i className="icon-edc-common-code"></i></a>
            {/*    <a title={getLabel('502403', '自定义公式')}><i className="icon-edc-common-Function"></i></a> */}
            

            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@7faowc`}
              uploadUrl="."
              category='string'
              maxUploadSize={0}
              maxFilesNumber={1}
              limitType='xlsx'
              autoUpload={false}
              getShowListDatas={this.getShowListDatas}
            >
              <a title={getLabel('502328', '本地Excel')}><i className="icon-mode-file-excel" /></a>
            </WeaUpload>
            <a title={getLabel('505908', '新建Excel')} style={{fontSize:'22px'}} onClick={excelDesigner.newPage}><i className="icon-coms-New-Flow"></i></a>
            <a title={getLabel('502329', '选择模板')} onClick={excelDesigner.templateBrowserStore.open}><i className="icon-coms02-Data-center"></i></a>
            {fieldAssignList.length > 0 ? <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@urp1ow`}
              placement="bottomLeft"
              trigger="click"
              visible={excelDesigner.fieldAssignStore.faMenuVisible}
              onVisibleChange={excelDesigner.fieldAssignStore.faShowMenu}
              content={
                <ul className="menu">
                  {fieldAssignList.map(fa => (
                    <li className="menu-item" title={fa.name}>
                      <div className="text-elli" style={{ width: 160 }} onClick={this.openFieldAssign.bind(this, fa.id)}>
                        {fa.name}
                      </div>
                      <div className="menu-item-opts"><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@prrd4b@${fa.id}`} type="delete" onClick={this.deleteFieldAssign.bind(this, fa.id)} title={getLabel(502286, '删除')}></Icon></div></li>
                  ))}
                  <li style={{ textAlign: 'center' }} ><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mvalrj`} onClick={excelDesigner.addFieldAssign} type="primary" icon="plus" shape="circle"></Button></li>
                </ul>
              }
            >
              <a title={getLabel('507808', '字段赋值')}>
                <Badge ecId={`${this && this.props && this.props.ecId || ''}_Badge@ig3euh`} count={fieldAssignList.length}>
                  <i title={getLabel('507808', '字段赋值')} className="icon-edc-common-Console-SQL" />
                </Badge>
              </a>
            </Popover> : <a onClick={excelDesigner.addFieldAssign} title={getLabel('507808', '字段赋值')}>
                <i className="icon-edc-common-Console-SQL" />
              </a>}
              <a title={getLabel('221', '预览')} onClick={excelDesigner.preview}><i className="icon-edc-common-View"></i></a>
          </div>}
          <ul className='wea-f14'>
            {this.renderTabs()}
          </ul>
        </div>
        <div className="logo-right">{appName}</div>
      </div>
    );
  }
  getShowListDatas = (oldFields, newFields) => {
    const { store: { excelDesigner } } = this.props;
    const [file] = newFields;
    if (file) {
      const fileInstance = file.getNative();
      if (typeof excelDesigner.importFile === 'function') {
        excelDesigner.importFile(fileInstance);
      }
    }
  }
  openDataSource = (key) => {
    const { store: { excelDesigner } } = this.props;
    const { openDataSource } = excelDesigner;
    if (typeof openDataSource === 'function') {
      openDataSource(key);
    }
  }
  openFieldAssign = (key) => {
    const { store: { excelDesigner } } = this.props;
    const { openFieldAssign } = excelDesigner;
    if (typeof openFieldAssign === 'function') {
      openFieldAssign(key);
    }
  }

  deleteFieldAssign = (key) => {
    const { store: { excelDesigner } } = this.props;
    const { deleteFieldAssign } = excelDesigner;
    if (typeof deleteFieldAssign === 'function') {
      deleteFieldAssign(key);
    }
  }

  deleteDataSource = (key) => {
    const { store: { excelDesigner } } = this.props;
    const { deleteDataSource } = excelDesigner;
    if (typeof deleteDataSource === 'function') {
      deleteDataSource(key);
    }
  }
}
